<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="80px" class="search">
		  <el-form-item label="物品名称">
		    <el-input v-model="name" placeholder="请输入物品名称"></el-input>
		  </el-form-item>
		  <el-form-item label="物品类型">
			<el-select v-model="type" placeholder="请选择物品类型">
			<el-option label="生活用品" value="1"></el-option>
			<el-option label="家电用品" value="2"></el-option>
			<el-option label="娱乐设备" value="3"></el-option>
			<el-option label="医疗设备" value="4"></el-option>
			</el-select>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- 添加表单 -->
		<el-button type="success" @click="isAdd()">添加</el-button>
		<el-dialog title="添加物品" :visible.sync="dialogFormVisible" >
			<el-form :model="form">
				<el-form-item label="物品名称" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="物品库存" :label-width="formLabelWidth">
					<el-input v-model="form.number" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="物品类型" :label-width="formLabelWidth">
					<el-select v-model="form.type" placeholder="请选择物品类型">
						<el-option label="生活用品" value="1"></el-option>
						<el-option label="家电用品" value="2"></el-option>
						<el-option label="娱乐设备" value="3"></el-option>
						<el-option label="医疗设备" value="4"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 表格分页 -->
		<el-table
		    :data="tableData"
		    border
			fit
		    style="width: 100%"
			:header-cell-style="{textAlign: 'center'}"
			:cell-style="{ textAlign: 'center' }">
			<el-table-column fixed prop="id" label="物品编号"></el-table-column>
		    <el-table-column fixed prop="name" label="物品名称"></el-table-column>
		    <el-table-column prop="type" label="物品类型"></el-table-column>
		    <el-table-column prop="kucun" label="物品库存"></el-table-column>

		    <el-table-column fixed="right" label="操作" >
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
		        <el-button type="text" size="small" @click="isDelete()">删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		name:"PlayerINformation",
		data(){
			return{
				name:"",
				type:"",
				nickname:"",
				uid:"",
				tableData: [{
						id : 10001,
						name: '牙刷',
						type: '生活用品',
						kucun : '1个'
					}, {
						id : 10002,
						name: '电视',
						type: '家电用品',
						kucun : '1台'
					}, {
						id : 10003,
						name: '篮球',
						type: '娱乐设备',
						kucun : '1个'
					}, {
						id : 10004,
						name: '心电机',
						type: '医疗设备',
						kucun : '1台'
					}],
				dialogFormVisible: false,
				form: {
					name: '',
					type: '',
					number: '',
					delivery: false
				},
				formLabelWidth: '120px'
			}
		},
		methods:{
			//查看
			handleClick(row) {
				console.log(row);
				this.form.name=row.name;
				this.form.type=row.type;
				this.form.number=row.number;
				this.dialogFormVisible=true;
				//console.log(row.name);
			},
			search(){
				console.log(this.name,this.nickname,this.uid)
			},
			isAdd(){
				this.form.name='';
				this.form.type='';
				this.form.number='';
				this.dialogFormVisible=true;
			},
			isDelete() {
				this.$confirm('此操作将删除该物品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }

  .el-dialog .el-form{
	  width: 500px;
  }
</style>
